<template>
  <div>
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="通知名">
          <el-input v-model="formInline.typeName" placeholder="通知名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="findName">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <hr>
    <div>
      <el-button type="primary" @click="dialogVisible = true">添加</el-button>
      <el-button type="danger" plain @click="deleteAll">批量删除</el-button>
    </div>
    <br>

    <template>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="typeName"
          label="通知类型"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="typeDesc"
          label="详细通知"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="typeSort"
          label="分类类型"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="createBy"
          label="添加人"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="添加时间"
          width="180"
          align="center">
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="dialogVisible1 = true,handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2,3,4]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <!--添加弹出框-->
    <el-dialog
      title="添加通知"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">

      <el-form ref="type" :model="type" label-width="80px">
        <el-form-item label="类型名称">
          <el-input v-model="type.name"></el-input>
        </el-form-item>
        <el-form-item label="详细通知">
          <el-input v-model="type.desc"></el-input>
        </el-form-item>
        <el-form-item label="通知类型">
          <el-input v-model="type.sort"></el-input>
        </el-form-item>
        <el-form-item label="创建人">
          <el-input v-model="type.createBy"></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="type.createTime" type="datetime"></el-date-picker>
        </el-form-item>
      </el-form>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false,onSubmit()">确 定</el-button>

    </el-dialog>
    <!--编辑房屋-->
    <el-dialog
      title="编辑楼宇"
      :visible.sync="dialogVisible1"
      width="30%"
      :before-close="handleClose1">

      <el-form ref="type" :model="type" label-width="80px">
        <el-form-item label="类型名称">
          <el-input v-model="type.typeName"></el-input>
        </el-form-item>
        <el-form-item label="详细通知">
          <el-input v-model="type.typeDesc"></el-input>
        </el-form-item>
        <el-form-item label="通知类型">
          <el-input v-model="type.typeSort"></el-input>
        </el-form-item>
        <el-form-item label="创建人">
          <el-input v-model="type.createBy"></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-input v-model="type.createTime"></el-input>
        </el-form-item>
      </el-form>
      <el-button @click="dialogVisible1 = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible1 = false,onSubmit1()">确 定</el-button>

    </el-dialog>
  </div>
</template>

<script>
  export default {
<<<<<<< HEAD
    name: "type",
    data() {
      return {
        tableData: [],
        currentPage: 1,
        pageSizes: [2, 3, 4],
        pageSize: 2,
        total: 0,
        formInline: {
          typeName: ''

        },
        multipleSelection: [],
        dialogVisible: false,
        dialogVisible1: false,
        type: {
          typeId: '',
          typeName: '',
          typeDesc: '',
          typeSort: '',
          createBy:'',
          createTime:''
        }
      }
    },
    methods: {
      findName() {
        this.$http({
          method: "GET",
          url: "http://localhost:8090/cmsType1/name",
          params: {typeName:this.formInline.typeName,
            currentPage: this.currentPage,
            pageSize: this.pageSize}
        }).then(resp => {
          console.log(resp)
          this.tableData = resp.data.data.records;
          this.total = resp.data.data.total;
        })
      },
      onSubmit() {
=======
      name: "Test02",
      data() {
               return {
                     a:10
                      }
              },
      methods: {
>>>>>>> cda6e70 (修改操作)

        this.$http({

          method: "POST",
          url: "http://localhost:8090/cmsType1",
          data: this.type
        }).then(resp => {
          this.type={typeId: '',
            typeName: '',
            typeDesc: '',
            typeSort: '',
            createBy:'',
            createTime:''};
          this.findall(1, 2);
        })
      },
      onSubmit1() {

        this.$http({
          method: "PUT",
          url: "http://localhost:8090/cmsType1",
          data: this.type
        }).then(resp => {
          this.type={typeId: '',
            typeName: '',
            typeDesc: '',
            typeSort: '',
            createBy:'',
            createTime:''};
          this.findall(this.currentPage, this.pageSize);
        })
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      handleClose1(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      deleteAll() {
        let a = this.currentPage;
        let ids = [];
        console.log(this.multipleSelection)
        for (let i = 0; i < this.multipleSelection.length; i++) {
          let j = this.multipleSelection[i].typeId;
          ids.push(j);
        }
        ;
        console.log(ids);
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            method: "DELETE",
            url: "http://localhost:8090/cmsType1",
            data: ids
          }).then(resp => {
            if (a > (this.total / this.pageSize)) {
              this.findall(a - 1, this.pageSize);
            } else {
              this.findall(a, this.pageSize);
            }

            if (resp.data.code == 1) {
              //2. 信息提示
              this.$message({
                message: "" + resp.data.msg,
                type: 'success'
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },
      //多选矿数组赋值
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      findById(id) {
        this.$http({
          type: "GET",
          url: `http://localhost:8090/cmsType1/${id}`
        }).then(resp => {
          console.log(resp);
          console.log(resp.data);
          this.type = resp.data.data
        })


      },
      //编辑的方法
      handleEdit(index, row) {
        let id = row.typeId;
        this.findById(id);
      },
      //删除的方法
      handleDelete(index, row) {
        let id = row.typeId;
        let a = this.currentPage;
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            method: "DELETE",
            url: `http://localhost:8090/cmsType1/${id}`

          }).then(resp => {
            console.log(resp);
            console.log(resp.data);
            if (a > (this.total / this.pageSize)) {
              this.findall(a - 1, this.pageSize);
            } else {
              this.findall(a, this.pageSize);
            }

          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });


      },
      // 页面大小的触发函数
      handleSizeChange(val) {

        //拿到当前的页面大小
        this.pageSize = val;
        //重新加载 数据
        this.findall(this.currentPage, this.pageSize);
      },
      //当前页面变化触发的函数
      handleCurrentChange(val) {

        this.currentPage = val;
        // 当前第几页发生了变化  重新加载数据
        this.findall(this.currentPage, this.pageSize);
      },
      findall(currentPage,pageSize) {
        this.$http({
          method: "GET",
          url: "http://localhost:8090/cmsType1",
          params: {
            currentPage: currentPage,
            pageSize: pageSize
          }
        }).then(resp => {
          console.log("通知")
          console.log(resp)
          console.log(resp.data.data)
          this.tableData = resp.data.data.records
          this.total = resp.data.data.total;
        })

      }
    },
    created() {
      this.findall(1, 2);
    }
  }
</script>

<style>
</style>
